<template>
  <div class="card">
    <p>姓名:{{itemObj.name}} <van-tag :type="relt">{{itemObj.txt}}</van-tag></p>
    <p>理论成绩:{{itemObj.gradeL}}</p>
    <p>技能成绩:{{itemObj.gradeJ}}</p>
    <p>综合得分:{{(itemObj.gradeL*0.2+itemObj.gradeJ*0.8).toFixed(2)}}</p>
  </div>
</template>
<script>
import { computed } from 'vue';
export default {
  props: {
    itemObj: Object,
  },
  setup(props) {
    const relt = computed(() => {
         // 利用计算属性来 返回 van-tag type 类型。
        return props.itemObj.txt=='优秀'?'primary':props.itemObj.txt=='良好'?'success':'danger'
    })
    return{
       relt 
    }
  }
};
</script>
<style lang="scss" scoped>
.card{
 background: #fff;
 width: calc(100% - 20px);
 margin: 10px auto 0;
 border-radius: 5px;
 padding: 10px;
 box-sizing: border-box;
 p{
   line-height: 30px;
 }
}
</style>

